<script setup lang="ts">
import {ref} from "vue";
import APIClient from "src/utils/APIClient";
import {tips} from "src/utils/util";
import {useQuasar} from "quasar";
import {useSysStore} from "stores/sysStore";

let $q = useQuasar();
let sysStores = useSysStore()
let showDia = ref(false)
let channelInstanceId = '';

const openDialog = (id:string) => {
  showDia.value = true;
  channelInstanceId = id;
  getElement(5); // 默认评分为5，获取对应的标签
}

let evaluationPoint = ref(5)
let evaluateContent = ref('')
let pointTextList = ['','非常差劲','有点差劲','一般满意','比较满意','非常满意']
let pointText = ref('非常满意')

//评分变化时触发，更新文本描述
const changePoint = (x:number) => {
  pointText.value = pointTextList[x] || '非常满意';
  getElement(x)
}

//根据不同的评分获取不同的标签，用去群众选择
let tagList = ref([]) //标签列表
const getElement = (value:number) => {
  APIClient.get('/user/evaluate/query/element?grade_value='+value).then((res) => {
    tagList.value = res.data
    evaluateCode.value = ''; // 清空选择的标签
  })
}

//选择标签，用于提交
let evaluateCode = ref(''); // 评价代码
const selectTag = (x:{Id:string}) => {
  if (evaluateCode.value.includes(`${x.Id},`))
    return evaluateCode.value = evaluateCode.value.replace(`${x.Id},`,''); // 如果已经选择了该标签，则取消选择
  evaluateCode.value +=  `${x.Id},`; // 设置评价代码
}

const submitEvaluate = () => {
  let evaluate = evaluateCode.value.replace(/(,\s*)$/, '')// 去掉最后一个逗号
  APIClient.post('/user/video/evaluate/add',{
    evaluation_point:evaluationPoint.value, //评分
    evaluate_code:evaluate.split(','),//选择tag的ID
    evaluate_content:evaluateContent.value,//评价的文本
    contact_phone:sysStores.userInfo?.phone_num,//评价人的电话
    contact_person: sysStores.userInfo?.phone_num,//评价人姓名
    channel_instance_id:channelInstanceId || '',//频道实例ID
  }).then((res) => {
    tips.success($q, '提交成功，感谢您的评价！')
    resetData();
  })
}

const resetData = () => {
  showDia.value = false; // 关闭对话框
  evaluationPoint.value = 5; // 重置评分
  evaluateContent.value = ''; // 清空内容
  evaluateCode.value = ''; // 清空选择的标签
  pointText.value = '非常满意'; // 重置文本
  tagList.value = []; // 清空标签列表
}

defineExpose({
  openDialog
})
</script>

<template>
  <q-dialog v-model="showDia">
    <q-card>
      <q-card-section class="row items-center q-pb-none">
        <div class="com-tit">请您对本次服务进行评价</div>
        <q-space/>
        <q-btn icon="close" flat round dense v-close-popup/>
      </q-card-section>

      <q-card-section>
        <div class="evaluate-com">
          <div class="item">
            <q-rating v-model="evaluationPoint" :max="5" @update:model-value="changePoint" size="3.5em" color="warning" icon="star_border" icon-selected="star"/>
            <div class="des">{{pointText}}</div>
          </div>
          <div class="item tag-list">
            <div class="tag" :class="{'active':evaluateCode.includes(`${x.Id},`)}" v-for="x in tagList" @click="selectTag(x)">{{x.Content}}</div>
          </div>
          <div class="item">
            <q-input v-model="evaluateContent" filled type="textarea" label="请留下您的宝贵意见"/>
          </div>

        </div>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="跳过评价" @click="resetData" color="primary"/>
        <q-btn flat label="确认提交" @click="submitEvaluate" color="primary"/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped lang="scss">
  .com-tit{
    font-size: 16px;
  }
  .evaluate-com{
    width: 400px;
    min-height: 500px;
    .item{
      text-align: center;
      margin-top: 20px;
      .des{
        padding-top: 20px;
        font-size: 16px;
      }
    }
    .tag-list{
      display: flex;
      flex-wrap: wrap;
      .active{
        color: #1D8FE1;
        border-color: #1D8FE1!important;
      }
      .tag{
        margin-right: 10px;
        padding: 3px 10px;
        border-radius: 20px;
        border: 1px solid gray;
        border-bottom: 2px solid gray;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all .2s ease-in-out;
      }
      .tag:hover{
        transform: scale(1.1);
        transition: all .2s ease-in-out;
      }
    }
  }
</style>
